<!--组件配置表单通用配置项-->

<template>
  <div class="component-global-setting-form">
    <Form :label-width="64">
      <FormItem label="组件ID">
        <i-input size="small" :value="id" readonly>
          <Button title="复制" slot="append" v-clipboard="idClipOptions"><Icon type="md-copy" /></Button>
        </i-input>
      </FormItem>
      <FormItem style="margin-top: -8px;">
        <Button size="small" type="default" @click="compConfigDataViewDrawerVisible = !compConfigDataViewDrawerVisible">查看组件配置源数据</Button>
        <Tooltip content="可对组件进行重新渲染，当某些组件修改配置后无法立即生效的情况下，可以尝试对组件进行重载" :max-width="200" placement="left">
          <Button class="m-l-5px" size="small" type="default" @click="reloadComponent">重载组件</Button>
        </Tooltip>
      </FormItem>
    </Form>

    <Drawer title="组件基础配置源数据"
            placement="left"
            v-model="compConfigDataViewDrawerVisible"
            :draggable="true"
            :closable="false"
            :mask-closable="true"
            width="450">
      <div style="background-color: #fff;">
        <PnJsonEditor v-model="compConfigData" :mode="'view'"></PnJsonEditor>
      </div>
    </Drawer>
  </div>
</template>

<script>
export default {
  name: "ComponentGlobalSettingForm",
  props: {
    id: {
      type: String
    },
    compConfigData: {
      type: Object
    }
  },
  data() {
    return {
      compConfigDataViewDrawerVisible: false
    }
  },
  mounted() {

  },
  methods: {
    reloadComponent() {
      this.$EventBus.$emit('pn_reloadComponent', this.id)
    }
  },
  computed: {
    idClipOptions () {
      return {
        value: this.id,
        success: () => {
          this.$Message.success('复制成功')
        },
        error: () => {
          this.$Message.error('复制失败')
        }
      }
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
  .component-global-setting-form {
    padding: 5px;
    background-color: #616161;
    border: 1px solid #212121;
    border-radius: 4px;
    margin-bottom: 6px;
  }
</style>
